<template>
  <div class="form">
    <el-form :model="ruleForm" ref="ruleForm" label-width="140px" class="demo-ruleForm">
      <el-form-item label="品牌名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>

      <el-form-item label="品牌首字母" required>
        <el-input v-model="ruleForm.firstLetter"></el-input>
      </el-form-item>
      <el-form-item label="品牌LOGO" prop="sort">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="品牌专区大图" prop="excelFile">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="品牌故事">
        <el-input type="textarea" v-model="ruleForm.brandStory"></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="ruleForm.sort"></el-input>
      </el-form-item>
      <el-form-item label="是否显示" prop="type">
        <el-radio-group v-model="ruleForm.showStatus">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="品牌制造商" prop="resource">
        <el-radio-group v-model="ruleForm.factoryStatus">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style>
.form {
  width: 800px;
  border: 1px solid #ebeef5;
  margin: 0px auto;
}
.el-input {
  width: 500px;
}
.el-textarea {
  width: 500px;
}
.el-form-item {
  margin-bottom: 22px;
  margin-top: 22px;
}
</style>
<script>
export default {
  data() {
    return {
      id: null,
      ruleForm: {
        bigPic: null,
        brandStory: null,
        factoryStatus: 0,
        firstLetter: null,
        logo: null,
        name: null,
        showStatus: 0,
        sort: 0
      },

      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        },
    
      ]
    };
  },
  methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
    select(data) {
      this.ruleForm.parentId = data;
    },
    submitForm() {
      var that = this;
      this.$confirm("是否提交数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios.post("/brand/update/" + this.id, {
            bigPic: this.ruleForm.bigPic,
            brandStory: this.ruleForm.brandStory,
            factoryStatus: this.ruleForm.factoryStatus,
            firstLetter: this.ruleForm.firstLetter,
            logo: this.ruleForm.logo,
            name: this.ruleForm.name,
            showStatus: this.ruleForm.showStatus,
            sort: this.ruleForm.sort
          });
        })
        .then(() => {
          that.$router.push("/ProductAdmin");
          that.$message({
            type: "success",
            message: "修改成功!"
          });
        })
        .catch(() => {
          that.$message({
            type: "info",
            message: "已取消提交"
          });
        });
    },
    show() {
      var data = this.$route.params.element;
      var form = this.ruleForm;
      form.bigPic = data.bigPic;
      form.brandStory = data.brandStory;
      form.factoryStatus = data.factoryStatus;
      form.firstLetter = data.firstLetter;
      form.logo = data.logo;
      form.name = data.name;
      form.showStatus = data.showStatus;
      form.sort = data.sort;
      this.id = data.id;
    },

    uploadUrl: function() {
      return "http://172.16.82.63:8080/uploadPath";
    }
  },
  mounted() {
    this.show();
  }
};
</script>